<template>
	<view class="container">
		<u-sticky>
			<view class="sticky">
				<u-search class="inp" placeholder="搜索职位" v-model="keyword" @search="change" :show-action="false" input-align="center"></u-search>
			</view>
		</u-sticky>
		<view class="box">
			<view class="conter" v-for="(item,index) in list" :key="index" @click="details(item.id)">
				<view class="top">
					<view class="topz">
						<view class="" style="font-size: 32rpx;font-weight: bold;">
							<!-- 产品经理 -->
							{{item.job_type_name}}
						</view>
						<view class="zi">
							<text>{{ item.city_name}}</text>
							<text>|</text>
							<text>{{item.department_type_name}}</text>
							<text>|</text>
							<text>{{item.work_experience_type_name}}</text>
							<text>|</text>
							<text>{{item.edu_type_name}}</text>
						</view>
						<view class="xq">
							<text>{{item.treatment_type_name}}</text>
							<text>{{item.treatment_type_name}}</text>
							<text>{{item.treatment_type_name}}</text>
						</view>
					</view>
					<view class="topy" style="font-size: 35rpx;font-weight: bold;color: #3291F8;">
						{{item.salary_range_type_name}}
					</view>
				</view>
				<view class="bottom" v-if="item">
					<view class="" style="display: flex;align-items: center;">
						<image src="../../static/logo.png" style="width: 80rpx;height: 80rpx;border-radius: 10rpx;" mode=""></image>
						<view class="" style="margin-left: 15rpx;">
							<view class="" style="font-size: 35rpx;font-weight: bold;">
								{{item.link_name}}
							</view>
							<view class="">
								<view class="zi">
									<text>50-150人 | 移动互联网</text>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="btn" v-if="identity==1">
			<view class="dl" @click="fabu">
				<view class="dll">
					发布新职位
				</view>
			</view>
		</view>
		<u-toast ref="uToast" />
	</view>
</template>

<script>
	export default{
		data(){
			return{
				keyword:'',
				form:{
					page:1,
					k:''
				},
				list:'',
				dizhi:'',
				identity:'',
				// identity 0是公开,1是企业自己
			}
		},
		onReachBottom(){
			console.log("到底了")
			this.form.page=this.form.page+1
			this.jz()
		},
		onLoad(e) {
			if(e.id==0) {
				this.dizhi='/Index/Index/get_job_list';
				this.identity=0;
			}else if(e.id==1){
				this.dizhi='/Index/UserCompany/get_job_list';
				this.identity=1;
			}
			this.jz()
		},
		methods:{
			details(e){
				uni.navigateTo({
					url:'../my/enterprise/details?id='+e+'&identity='+this.identity
				})
			},
			change(e){
				// console.log(e)
				this.form.page=1;
				this.form.k=this.keyword;
				this.jz()
			},
			async chakan(){
				const res = await this.post(this.dizhi,this.form);
				this.list=res.data
			},
			async jz(){
				const res = await this.post(this.dizhi,this.form);
				if(res.data.length==0){
					this.$refs.uToast.show({
						title: '暂无更多内容',
						// type: 'error',
						// url: '/pages/user/index'
					})
					return
				}
				this.list = [...this.list, ...res.data];
				console.log(this.list)
			},
			fabu(){
				uni.navigateTo({
					url:'./release'
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.btn{
			width: 100%;
			// display: flex;
			// align-items: center;
			// justify-content: space-around;
			position: fixed;
			bottom: 10rpx;
	}
		.dl {
			width: 100%;
			padding: 30rpx;
			
			// transform: translateX(-50%);
		
			.dll {
				width: 100%;
				height: 90rpx;
				color: #FFFFFF;
				line-height: 90rpx;
				text-align: center;
				border-radius: 15rpx;
				background-color: #3291F8;
				border: 1rpx solid #3291F8;
			}
			.dlll{
				width: 100%;
				height: 90rpx;
				line-height: 90rpx;
				text-align: center;
				border-radius: 15rpx;
				color: #ff0000;
				background-color: #FFFFFF;
				border: 1rpx solid #ff0000;
			}
		}
	.container {
		// height: 200vh;
		// margin-top:0rpx;
	}
	
	.sticky {
		// width: 750rpx;
		height: 160rpx;
		background-color: #3291F8;
		color: #fff;
		// padding: 24rpx;
	}
	.inp{
		position: absolute;
		top: 50rpx;
		left: 50%;
		transform: translateX(-50%);
		width: 600rpx;
	}
	.xia{
		padding: 100rpx 30rpx 0rpx 30rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}
	.box{
		padding: 30rpx;
		box-sizing: border-box;
		.conter{
			margin: 20rpx 0;
			.top{
				display: flex;
				justify-content: space-between;
				.topz{
					.zi{
						font-size: 20rpx;
						margin: 20rpx 0;
						text{
							margin-right: 10rpx;
						}
					}
					.xq{
						text{
							color: #7F7F7F;
							font-size: 24rpx;
							padding: 4rpx 15rpx;
							margin-right: 10rpx;
							background-color: #E7E7E7;
						}
					}
				}
			}
			.bottom{
				margin: 40rpx 0 80rpx 0;
				.zi{
					text{
						margin-right: 10rpx;
						font-size: 20rpx;
					}
				}
			}
		}
	}
</style>